<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>边框旋转动画</title>
    <style>
        *{
            margin: 0;
            padding:0;
        }
        #canvas{
            background: #34495e;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            border-radius: 10px;
            box-shadow: 2px 2px 4px #34495e,-2px -2px 4px #34495e;
        }
        body{
            height: 100vh;
            width: 100vw;
            position: relative;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="300" height="300"></canvas>

    <script>
        const cavs = document.getElementById('canvas')
        const ctx = cavs.getContext('2d')
        const gnt = ctx.createLinearGradient(0,0,250,0);
        gnt.addColorStop(0,'#f54ea2');
        gnt.addColorStop(1,'#ff7676');
        function drawBorder(circle){
            ctx.clearRect(0,0,300,300)
            ctx.fillStyle = gnt;
            // ctx.fillStyle = '#fff'
            ctx.beginPath();
            ctx.arc(150,150,300,circle*Math.PI/180,(75+circle)*Math.PI/180,false);
            ctx.lineTo(150,150)
            ctx.closePath();
            ctx.fill();
            ctx.save();
            ctx.fillStyle = '#34495e';
            ctx.fillRect(8,8,284,284);
            ctx.font = '20px Fira Code Light'
            ctx.fillStyle = '#fff';
            ctx.fillText("Border Animation",50,160)
        }
        let i =0;
        drawBorder(0);
        setInterval(()=>{drawBorder(++i)},8)
    </script>
</body>
</html>